<template>
	<view>
		<view id="container" class="container">
			<!-- <view>sdf</view> -->
			<view class="title_view"
				:style="['height:' + titleHeight + 'px;z-index:1', stickyscroll ? 'background-color:rgba(0,0,0,.3)' : '']">
				<!-- sdfsdf -->
				<view class="title bh-row bh-justify-space-between "
					:style="'height:' + titleHeight + 'px;padding-top:' + capsuleTop + 'px'">
					<view class="left_arrow_box" @click="back">
						<image src="../../static/images/white_left_arrow.svg" mode=""></image>
					</view>
					<view class="edit-info">店铺详情</view>
					<view class="" style="width: 80rpx;"></view>
				</view>
			</view>
			<uni-swiper-dot :info="images" :current="current" field="content" mode="round" :dotsStyles="dotsStyle"
				style="position: relative;">
				<swiper class="swiper-box" @change="changeImage" style="height: 576rpx;">
					<swiper-item v-if="postDto.shopVideo" style="height: 576rpx">
						<view style="height: 100%;">
							<video style="height: 528rpx;width: 750rpx;" :src="postDto.shopVideo" />
						</view>
					</swiper-item>

					<swiper-item v-for="(item, index) in images" :key="index" style="height: 576rpx">
						<view style="position: relative;">
							<!-- <view class="black-view"></view> -->
							<image @click="previewPostImg(postDto, index)" :src="item" mode="aspectFill"
								style="height: 576rpx;width: 750rpx;" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="post-detail">
				<view></view>
				<!-- <image src="../../static/images/home/home_post_item.png" class="post-detail-img" mode="scaleToFill" /> -->
				<!-- <view class="post-detail-title-mask">
        <view class="post-detail-title">回龙观餐厅转让</view>
        <view class="post-detail-sub-title">昌平区 回龙观龙腾路 15m2</view>
      </view> -->
				<!-- <view class="post-detail-img-label">老板直租</view> -->
				<view class="bh-row bh-justify-space-between p030 bh-align-start">
					<view class="detail-title bh-flex-1">{{ title }}</view>
					<view>
						<view v-if="postDto.metricRecordDtoMap.collect != 1 && !isMyPost(postDto) && !fromMessagePage"
							@click="confirmCollect" class="detail-collect-wrap bh-row bh-justify-space-between">
							<view class="detail-collect-title">收藏</view>
							<image class="detail-collect" src="../images/detail/collect.svg"
								mode="scaleToFill" />
						</view>
					</view>
					<view>
						<view v-if="postDto.metricRecordDtoMap.collect == 1 && !isMyPost(postDto) && !fromMessagePage"
							@click="cancelCollect" class="detail-collect-wrap bh-row bh-justify-space-between">
							<view class="detail-collect-title">收藏</view>
							<image class="detail-collect" src="../images/detail/collected.svg"
								mode="scaleToFill" />
						</view>
					</view>

				</view>
				<view class="post-detail-img-sc"></view>
				<view class="post-detail-money-wrap bh-row bh-justify-start bh-align-center">
					<view class="post-detail-money-label">租</view>
					<view class="post-detail-money">{{ getSimpleAmount(postDto.rent) }}</view>
					<view class="post-detail-money-unit">/月</view>
					<view class="post-detail-money-label">转</view>
					<view class="post-detail-money">{{ postDto.transferFee ? getFixedUnit : '面议' }}</view>
					<!-- <view class="post-detail-money-unit">{{ postDto.transferFee ? '/万' : '' }}</view> -->
					<view class="post-detail-view bh-flex-1">
						{{ postDto.createTimeDesc }}&nbsp;|&nbsp;{{ postDto.viewNumber }}浏览量
					</view>
				</view>
				<view v-if="postDto.labelDtoList && postDto.labelDtoList.length > 0"
					class="post-detail-label-wrap bh-row bh-justify-start bh-align-center">
					<view v-for="(item1, index1) in postDto.labelDtoList" :key="index1" class="post-detail-label">
						{{ item1.labelName }}
					</view>
				</view>
				<!-- <view class="post-detail-label-wrap bh-row bh-justify-start bh-align-center">
        <view class="post-detail-label">临近学校</view>
        <view class="post-detail-label">月利润100万</view>
        <view class="post-detail-label">精装修</view>
      </view> -->
				<view class="post-detail-tips" @click="showPostDetailTips = true">
					<text class="post-detail-tips-title">找铺指南：</text>
					<text style="display: block;flex: 1;">了解找铺须知，更懂乐铺多交易</text>
					<!-- <text class="post-detail-tips-link">>></text> -->
					<image src="../../static/images/li-right.png" class="comment_right" mode=""></image>
				</view>
				<view class="post-detail-location-wrap">
					<image src="../images/detail/pingfangmi.svg" mode="scaleToFill"
						class="post-detail-location-icon" />
					<view class="post-detail-location">{{ postDto.acreage }}平米</view>
				</view>
				<view class="post-detail-location-wrap">
					<image src="../images/detail/detail_area.svg" mode="scaleToFill"
						class="post-detail-location-icon" />
					<view class="post-detail-location">{{ postDto.city }}{{ postDto.area }}</view>
				</view>
				<view class="post-detail-location-wrap">
					<image src="../images/detail/detail_loca.svg" mode="scaleToFill"
						class="post-detail-location-icon" />
					<view class="post-detail-location">{{ postDto.address }}</view>
				</view>
				<view class="map-container" style="position: relative;" @tap="toMapDetail">
					<map id="mapSelected" enable-scroll="true" :enable-zoom="false" :latitude="mapInfo.latitude"
						:longitude="mapInfo.longitude" :markers="mapInfo.makers" :controls="controls" :scale="18"
						@controltap="controltap" @regionchange="regionchange"></map>

					<!-- 添加蒙层 -->
					<view
						style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1);">
					</view>
				</view>


				<!-- <view class="map-container">
        <view style="border-radius: 8rpx;" @tap="toMapDetail">
          <map id="mapSelected" enable-scroll="true" :enable-zoom="false" :latitude="mapInfo.latitude" :longitude="mapInfo.longitude" :markers="mapInfo.makers" :controls="controls" :scale="18" @controltap="controltap" @regionchange="regionchange"></map>
        </view>
      </view> -->
				<view class="post-detail-comment-wrap bh-row bh-justify-start bh-align-center">

					<view class="post-detail-comment-content"><text class="c0 fw600">老板说:</text>
						{{ postDto.content ? postDto.content : '~' }}</view>
				</view>
				<view style="height: 144rpx;"></view>
				<view class="footer">
					<!-- <view class="avatar"></view> -->
					<view style="position: relative;">
						<image class="avatar" style="display:block;position: relative;" :src="postDto.userDto.avatarUrl" mode="scaleToFill" />
						<view v-if="postDto.userDto.imUserStatus == 1" style="width: 18rpx;
    height: 18rpx;
    
    background-color: #39B542;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;">
						</view>
						<view v-else style="width: 18rpx;
						height: 18rpx;
						
						background-color: #ccc;
						position: absolute;
						top: 0;
						right: 0;
						border-radius: 50%;">
											</view>
						<!-- <view style="width: 18rpx;height: 18rpx;
						background-color: #39B542;position: absolute;"></view> -->
					</view>
					
					<view class="nickname-wrap">
						<view class="nickname">{{ postDto.userDto.nickName }}</view>
						<view class="nickname-label">
							<image class="label-icon" src="../images/detail/renzheng.svg"
								mode="scaleToFill" />
							<view class="label-title">店主认证</view>
						</view>
					</view>
					<view v-if="!isMyPost(postDto) && !fromMessagePage" class="bh-row bh-justify-end bh-flex-1">
						<view class="comment" @click="toComment">在线聊</view>
						<view @click="toMakePhone(postDto)" class="contact">联系他</view>
					</view>
					<!-- <image
          src="../images/detail/location.png"
          mode="scaleToFill"
        /> -->

				</view>
			</view>
			<showCustomModal></showCustomModal>
			<showAddCommentSheet v-if="showAddComment" ref="textarea1" :show="showAddComment"
				@close="() => { this.showAddComment = false }" :init-value="commentContent" @confirm="addComment"
				@change="changeComment"></showAddCommentSheet>
			<showPostDetailTipsSheet :show="showPostDetailTips" @close="() => { this.showPostDetailTips = false }">
			</showPostDetailTipsSheet>
			<!-- <BhContact @click-contact="contactUs"></BhContact> -->
		</view>
		<!-- <view v-if="!detailShow">
      <view class="left_arrow_box" @click="backDetail" style="position: absolute; z-index: 99;">
        <image src="../../static/images/white_left_arrow.svg" mode="" class="bigpic"></image>
      </view>
      <uni-swiper-dot :info="images" :current="current" field="content" mode="round" :dotsStyles="dotsStyle" style="position: relative;">
        <swiper class="swiper-box" @change="changeImage" style="height: 100vh;">
          <swiper-item v-if="postDto.shopVideo" style="height: 100vh">
            <view style="height: 100%;">
              <video style="height: 528rpx;width: 750rpx;" :src="postDto.shopVideo" />
            </view>
          </swiper-item>

          <swiper-item v-for="(item, index) in images" :key="index" style="height: 576rpx">
            <view style="position: relative;">
              <view class="black-view"></view>
              <image :src="item" mode="aspectFill" style="height: 100vh;width: 750rpx;" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view> -->
	<showCustomTips></showCustomTips>
	</view>
</template>

<script>
	import {
		Api
	} from '../../api/api'
	import {
		Dict
	} from '../../components/custom_views/dict'
	import uniSwiperDot from '@dcloudio/uni-ui/lib/uni-swiper-dot/uni-swiper-dot.vue';
	import {
		commonMixin
	} from '../../components/custom_views/mixin';
	import {
		CustomDict
	} from '../../components/custom_views/custom_dict';
	const components_custom_views_custom_dict = require("../../components/custom_views/custom_dict.js");
	import {
		PostUtils
	} from '@/components/post_item/post_add_sell_dto';
	import showAddCommentSheet from '@/PostPage/custom_views/show-add-comment-sheet.vue';
	import check_utils from '../../components/custom_views/check_utils';
	import showPostDetailTipsSheet from '../../components/custom_views/show-post-detail-tips-sheet.vue';
	import BhContact from '../../components/custom_views/bh-contact.vue';
	import {
		CustRequest
	} from '../../api/cust_request';
	import {
		BackendApi
	} from '../../api/backend_api';
	import showCustomTips from '../../components/custom_views/show-custom-tips.vue'
import { CustomDate } from '../../components/custom_views/custom_date';

	export default {
		components: {
			uniSwiperDot,
			showAddCommentSheet,
			showPostDetailTipsSheet,
			BhContact,
			showCustomTips
		},
		mixins: [
			commonMixin
		],
		data() {
			return {
				sessionDto: this.$store.state.sessionDto,
				detailShow: true,
				current: 0,
				capsuleHeight: 0,
				capsuleTop: 0,
				titleHeight: 0,
				postDto: {},
				// 是否从我的消息跳转而来
				fromMessagePage: false,
				dotsStyle: {
					bottom: 28,
					backgroundColor: 'rgba(255, 255, 255, 0.55)',
					selectedBackgroundColor: 'background: rgba(255, 255, 255, 0.55)'
				},
				showAddComment: false,
				commentContent: '',
				// 地图信息
				latitude: 39.909, // 默认纬度
				longitude: 116.39742, // 默认经度(北京天安门)
				covers: [{
					id: 110,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
					width: "20",
					height: "20"
				}],
				stickyscroll: false,
				controls: [{ // 控件
					id: 99,
					position: { // 控件位置
						left: 160,
						top: 120
					},
					iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
				}],
				source: '',
				showPostDetailTips: false,
			}
		},
		computed: {
			// isMember(){
			// 		  return this.$store.state.sessionDto.userDto.memberLevel == 1801 && 
			// 		  CustomDate.calSecondsFromDate(this.$store.state.sessionDto.userDto.memberExpireDate) < 0
			// },
			images() {
				return this.postDto.facadePicture.split(',')
			},
			mapInfo() {
				return {

					longitude: this.postDto.lng,
					latitude: this.postDto.lat,
					makers: [{
						id: 110,
						latitude: this.postDto ? this.postDto.lat : 39.949570,
						longitude: this.postDto ? this.postDto.lng : 116.451019,
						// iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
						iconPath: '../../static/images/detail/location.png',
						width: "20",
						height: "20"
					}]
				}
			},
			title() {

				return this.sellTitleByArea(this.postDto)

				// let industryName = CustomDict.getDictName(this.postDto.industryId, Dict.IndustryTypeEnum)
				// console.log('解析出行业名称', this.postDto.industryId, industryName)
				// return this.postDto.area + this.postDto.street + industryName + ''
			},
			content() {
				PostUtils.getContentByLen(100, this.postDto)
			},
			getFixedUnit() {
				return CustomDict.getSimpleRent(this.postDto.transferFee)
				// let fixed= components_custom_views_custom_dict.CustomDict.getSimpleRent(this.postDto.transferFee)
				// return fixed
			}
		},
		methods: {
			contactUs() {
				console.log('联系客服')
			},
			bigPic() {
				this.detailShow = false
			},
			changeImage(e) {
				console.log('改变图片的swiper', e)
				this.current = e.detail.current
			},
			toComment() {
				// 记录埋点
				Api.TrackApi.trackAdd(this, {
					userId: uni.getStorageSync('userId'),
					targetUserId: this.postDto.userId,
					recordId: this.postDto.id,
					extendInfo: CustomDict.TraceEventType.BtnAddComment.name,
					eventType: CustomDict.TraceEventType.BtnAddComment.value,
					trackCount: 1
				}, (res) => {

				})
				if (!PostUtils.canCommentOrContact(this.postDto)) {
					return
				}
				let that = this
				// 判断今日发起聊天的次数
				// that.showCustomTips({
				//   title: '温馨提示',
				//   content: '非会员每日最多发起3次聊天，您今日聊天次数已用完哦～',
				//   confirmText: '注册会员',
				//   confirmColor: '',
				//   cancelText: '取消',
				  
				//   success(res) {
				//     if (res.confirm) {
				//       uni.redirectTo({
				//         url: '/pages/home/home'
				//       })
				//     }else {
						
				// 	}
				//   }
				// })
				
				// 获取聊天次数，进行判断
				Api.CommentApi.imAddCount(that,(res) => {
					let remainCount = CustomDict.ConstantVals.NonMember.CountOfChat - (res.data ? res.data : 0)
					if(res.code == 200){
						if(that.isMember()){
							that.startConversation()
						}else if(res.data && res.data >= CustomDict.ConstantVals.NonMember.CountOfChat){
							that.showCustomTips({
							  title: '温馨提示',
							  content: CustomDict.ConstantVals.NonMember.TipOfChat,
							  confirmText: '注册会员',
							  confirmColor: '',
							  cancelText: '取消',
							  success(res) {
							    if (res.confirm) {
							      uni.redirectTo({
							        url: '/MemberPage/member_index/member_index'
							      })
							    }else {
									
								}
							  }
							})
						}else{
							that.showCustomTips({
							  title: '温馨提示',
							  content: CustomDict.ConstantVals.NonMember.TipOfChatFun(res.data),
							  confirmText: '确定',
							  confirmColor: '',
							  cancelText: '取消',
							  
							  success(res) {
							    if (res.confirm) {
							      if (that.postDto.userDto.imUserId) {
									that.startConversation()
							      }
							    }else {
									
								}
							  }
							})
						}
					}
				}, false)
				

				// this.showAddComment = true
				// this.commentContent = ''
				// this.$nextTick(() => {
				//   this.$refs.textarea1.focusInput();
				// });
			},
			startConversation(){
				let that = this
				// 记录发起聊天记录到后台
				Api.CustRequestSubscribeMessage(
					() => {
						Api.CommentApi.addImNew(
							that,
							that.postDto.id,
							that.postDto.userId,
							'您有新的未读消息',
							0,
							0,
							(res) => {
								// if (res.code == 200) {
								// 	check_utils.showCustToast('留言成功')
								// 	that.commentContent = ''
								// } else {
								// 	check_utils.showCustToast(res.msg)
								// }
							},
							false
						)
											      
						// 切换会话进入聊天
						const conversationID = `C2C${that.postDto.userDto.imUserId}`;
											      
						const initMsg =
							`租金:${that.getSimpleAmount(that.postDto.rent)}/月 转让费:${that.postDto.transferFee ? CustomDict.getSimpleRent(that.postDto.transferFee) : '面议'} ${that.postDto.acreage}平米 ${that.postDto.area} ${that.postDto.address}`
						console.log('初始的消息', initMsg)
											      
						// // #ifdef APP-PLUS || H5
						TUIConversationService.switchConversation(conversationID);
						// // #endif
						uni.navigateTo({
							url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}&initMsg=${initMsg}`,
						});
											      
					},
					() => {
											      
						Api.CommentApi.addImNew(
							that,
							that.postDto.id,
							that.postDto.userId,
							'您有新的未读消息',
							0,
							0,
							(res) => {
								// if (res.code == 200) {
								// 	check_utils.showCustToast('留言成功')
								// 	that.commentContent = ''
								// } else {
								// 	check_utils.showCustToast(res.msg)
								// }
							},
							false
						)
						// 切换会话进入聊天
						const conversationID = `C2C${that.postDto.userDto.imUserId}`;
											      
						const initMsg =
							`租金:${that.getSimpleAmount(that.postDto.rent)}/月 转让费:${that.postDto.transferFee ? CustomDict.getSimpleRent(that.postDto.transferFee) : '面议'} ${that.postDto.acreage}平米 ${that.postDto.area} ${that.postDto.address}`
						console.log('初始的消息', initMsg)
											      
						// // #ifdef APP-PLUS || H5
						TUIConversationService.switchConversation(conversationID);
						// // #endif
						uni.navigateTo({
							url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}&initMsg=${initMsg}`,
						});
					}
				)
			},
			addComment() {
				let that = this
				console.log('留言的内容', this.commentContent)
				if (!this.commentContent || this.commentContent.length < 5) {
					uni.showToast({
						title: '留言内容至少需要5个汉字哦～',
						icon: "none"
					})
					return
				}
				this.showAddComment = false

				Api.CustRequestSubscribeMessage(
					() => {
						Api.CommentApi.addNew(
							that,
							that.postDto.id,
							that.postDto.userId,
							that.commentContent,
							0,
							0,
							(res) => {
								if (res.code == 200) {
									check_utils.showCustToast('留言成功')
									that.commentContent = ''
								} else {
									check_utils.showCustToast(res.msg)
								}
							},
							true
						)

					},
					() => {

						Api.CommentApi.addNew(
							that,
							that.postDto.id,
							that.postDto.userId,
							that.commentContent,
							0,
							0,
							(res) => {
								if (res.code == 200) {
									check_utils.showCustToast('留言成功')
									that.commentContent = ''
								} else {
									check_utils.showCustToast(res.msg)
								}
							},
							true
						)
					}
				)
			},
			changeComment(commentContent) {
				console.log('留言内容', commentContent)
				this.commentContent = commentContent
			},
			toMakePhone(item) {
				let that = this
				if(!PostUtils.canCommentOrContact(item)){
				  return
				}
				// 获取打电话次数
				Api.CommentApi.phoneAddCount(that,(res) => {
					let remainCount = CustomDict.ConstantVals.NonMember.CountOfContact - (res.data ? res.data : 0)
					if(that.isMember()){
						uni.makePhoneCall({
						  // 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
						  phoneNumber: item.contactPhone,
						  // 成功回调
						  success: (res) => {
						    console.log('调用拨打电话成功!')
							  Api.TrackApi.trackAdd(that, {
								userId: uni.getStorageSync('userId'),
								targetUserId: that.postDto.userId,
								recordId: that.postDto.id,
								extendInfo: CustomDict.TraceEventType.BtnAddContact.name,
								eventType: CustomDict.TraceEventType.BtnAddContact.value,
								trackCount: 1
							  }, (res) => {
										
							  })
						  },
						  // 失败回调
						  fail: (res) => {
						    console.log('调用失败!')
						  }
						});
					}else if(res.code == 200){
						if(res.data && res.data >= CustomDict.ConstantVals.NonMember.CountOfContact){
							that.showCustomTips({
							  title: '温馨提示',
							  content: CustomDict.ConstantVals.NonMember.TipOfContact,
							  confirmText: '注册会员',
							  confirmColor: '',
							  cancelText: '取消',
							  
							  success(res) {
							    if (res.confirm) {
							      uni.redirectTo({
							        url: '/MemberPage/member_index/member_index'
							      })
							    }else {
									
								}
							  }
							})
						}else{
							that.showCustomTips({
							  title: '温馨提示',
							  content: CustomDict.ConstantVals.NonMember.TipOfContactFun(res.data),
							  confirmText: '确定',
							  confirmColor: '',
							  cancelText: '取消',
							  
							  success(res) {
							    if (res.confirm) {
							      uni.makePhoneCall({
							        // 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
							        phoneNumber: item.contactPhone,
							        // 成功回调
							        success: (res) => {
							          console.log('调用拨打电话成功!')
									  Api.TrackApi.trackAdd(that, {
									    userId: uni.getStorageSync('userId'),
									    targetUserId: that.postDto.userId,
									    recordId: that.postDto.id,
									    extendInfo: CustomDict.TraceEventType.BtnAddContact.name,
									    eventType: CustomDict.TraceEventType.BtnAddContact.value,
									    trackCount: 1
									  }, (res) => {
									  			
									  })
							        },
							        // 失败回调
							        fail: (res) => {
							          console.log('调用失败!')
							        }
							      });
							    }else {
									
								}
							  }
							})
						}
					}
				})
				
			  // 记录埋点
			//   Api.TrackApi.trackAdd(this, {
			//     userId: uni.getStorageSync('userId'),
			//     targetUserId: item.userId,
			//     recordId: item.id,
			//     extendInfo: CustomDict.TraceEventType.BtnAddContact.name,
			//     eventType: CustomDict.TraceEventType.BtnAddContact.value,
			//     trackCount: 1
			//   }, (res) => {
			
			//   })
			
			  // let that = this
			  // if(!PostUtils.canCommentOrContact(item)){
			  //   return
			  // }
			  // if (item.userDto.userId < 10000000000) {
			  //   this.showCustomModal({
			  //     content: CustomTips.tipsNoContactPhone,
			  //     cancelColor: '#666666',
			  //     cancelText: '',
			  //     confirmColor: 'rgba(0, 0, 0, 0.85)',
			  //     confirmText: '确定',
			  //     success: function (res) {
			  //       if (res.confirm) {
			  //         console.log('点击了确定', res)
			  //         that.hideCustomModal()
			  //       } else if (res.cancel) {
			  //         console.log('用户取消注销');
			  //       }
			  //     }
			  //   })
			  //   return
			  // }
			  // uni.makePhoneCall({
			  //   // 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
			  //   phoneNumber: item.contactPhone,
			  //   // 成功回调
			  //   success: (res) => {
			  //     console.log('调用成功!')
			  //   },
			  //   // 失败回调
			  //   fail: (res) => {
			  //     console.log('调用失败!')
			  //   }
			  // });
			},
			confirmCollect() {
				let that = this
				uni.requestSubscribeMessage({
					tmplIds: ['SatyFF0dG2Asi3caTX8tVOT_GtnObUhOSEH945zpuOc'],
					success(collectRes) {
						console.log('允许订阅收藏通知提醒消息', collectRes)
						Api.MetricRecordApi.updateCollect(that, that.postDto.id, '1', (res) => {
							if (res.code == 200) {
								that.postDto.metricRecordDtoMap.collect = 1
							}
						}, false)
					},
					fail(err) {
						console.log('允许订阅收藏通知提醒消息返回异常', err)
						Api.MetricRecordApi.updateCollect(that, that.postDto.id, '1', (res) => {
							if (res.code == 200) {
								that.postDto.metricRecordDtoMap.collect = 1
							}
						}, false)
					}
				})

			},
			cancelCollect() {
				let that = this
				this.showCustomModal({
					title: '取消收藏',
					content: '是否取消收藏',
					reverse: true,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							console.log('点击了确定', res)
							Api.MetricRecordApi.updateCollect(that, that.postDto.id, '0', (res) => {
								if (res.code == 200) {
									that.postDto.metricRecordDtoMap.collect = 0
								}
							}, false)
							that.hideCustomModal()
						} else if (res.cancel) {
							console.log('用户取消注销');
						}
					}
				})
				// uni.showModal({
				//   title: '取消收藏',
				//   content: '是否取消收藏',
				//   cancelColor: '#FF6430',
				//   showCancel: true,
				//   cancelText: '取消',
				//   confirmColor: '#666666',
				//   confirmText: '确定',
				//   success: function (res) {
				//     if (res.confirm) {
				//       console.log('点击了确定', res)
				//       Api.MetricRecordApi.updateCollect(that, that.postDto.id, '0', (res) => {
				//         if (res.code == 200) {
				//           that.postDto.metricRecordDtoMap.collect = 0
				//         }
				//       }, false)
				//     } else if (res.cancel) {
				//       console.log('用户取消注销');
				//     }
				//   }
				// })

			},
			backDetail() {
				this.detailShow = true
			},
			back() {
				if (this.source == 'share') {
					uni.redirectTo({
						url: '/pages/home/home'
					})
				} else if (this.source == 'sharetime') {
					uni.redirectTo({
						url: '/pages/home/home'
					})
				} else {
					uni.navigateBack()
				}
				// uni.navigateBack()
			},
			//跳转大地图
			toMapDetail() {
				// let detailJson = encodeURIComponent(JSON.stringify(this.postDto))
				// uni.navigateTo({
				//   url: '../detail_map/detail_map?detailJson=' + detailJson + '&postId=' + this.postDto.id
				// })
				let lat = Number(this.postDto.lat);
				let lon = Number(this.postDto.lng);
				var that = this
				wx.openLocation({
					latitude: lat,
					longitude: lon,
					name: that.postDto.area + that.postDto.address,
				})
			},
			initDetail(options) {
				console.log('初始化参数', options)
				let that = this
				if (options.detailJson && false) {

					this.postDto = JSON.parse(decodeURIComponent(options.detailJson))
					this.postDto.viewNumber = this.postDto.viewNumber ? (this.postDto.viewNumber + 1) : 1
					//添加足迹信息和更新浏览量
					Api.FootprintsApi.add(this.postDto.id, (footRes) => {}, false)
					Api.MetricRecordApi.updateViewNumber(that, {
						id: this.postDto.id,
						viewNumber: this.postDto.viewNumber
					}, (viewRes) => {}, false)
					// 导入发帖的账号信息到腾讯im中
					BackendApi.v05_post_importImAccount({
						userId: this.postDto.userId
					}, false)

				} else if (options.detailJson && options.source == 'sharetime') {
					// 分享到朋友圈
					this.postDto = JSON.parse(decodeURIComponent(options.detailJson))
					// this.postDto.viewNumber = this.postDto.viewNumber ? (this.postDto.viewNumber + 1) : 1
					//添加足迹信息和更新浏览量
					// Api.FootprintsApi.add(this.postDto.id, (footRes) => {
					// }, false)
					// Api.MetricRecordApi.updateViewNumber(that, { id: this.postDto.id, viewNumber: this.postDto.viewNumber }, (viewRes) => {
					// }, false)
				} else if (options.postId) {
					Api.PostApi.detail(options.postId, (res) => {
						if (res.code == 200) {
							res.data.viewNumber = res.data.viewNumber ? (res.data.viewNumber + 1) : 1
							that.postDto = res.data
							//添加足迹信息和更新浏览量
							if (!that.isMyPost(that.postDto)) {
								Api.FootprintsApi.add(options.postId, (footRes) => {}, false)
								Api.MetricRecordApi.updateViewNumber(that, {
									id: res.data.id,
									viewNumber: res.data.viewNumber
								}, (viewRes) => {}, false)
							}

							// 导入发帖的账号信息到腾讯im中
							BackendApi.v05_post_importImAccount({
								userId: res.data.userId
							}, false)

						}
					})


				} else {
					console.log('发帖详情参数错误', options)
				}
			},

		},
		// 分享给微信好友
		onShareAppMessage(res) {

			return {
				title: '详情|' + PostUtils.getTitle(this.postDto),
				imageUrl: this.postDto.facadePicture.split(',')[0],
				path: '/PostPage/post_detail_sell/post_detail_sell?source=share&postId=' + this.postDto.id,
			}
		},
		onShareTimeline(res) {
			let detailJson = encodeURIComponent(JSON.stringify(this.postDto))
			console.log('点击分享到朋友圈', this.postDto.facadePicture);
			return {
				title: '详情|' + PostUtils.getTitle(this.postDto),
				imageUrl: this.postDto.facadePicture.split(',')[0],
				query: 'source=sharetime&detailJson=' + detailJson + '&postId=' + this.postDto.id,
				path: '/PostPage/post_detail_sell/post_detail_sell'
			}
		},
		watch: {},

		// 页面周期函数--监听页面加载
		onLoad(options) {
			let that = this
			this.source = options.source
			console.log('转铺详情options:', options)
			if (options.source == 'share') {
				// 从分享而来
				Api.LoginApi.login(that, (res) => {
					uni.setStorageSync('firstLogin', 0)
					that.fromMessagePage = options.fromMessagePage == 'true' ? true : false
					that.initDetail(options)
					let capsule = uni.getMenuButtonBoundingClientRect()
					that.capsuleTop = capsule.top
					console.log(capsule)
					that.capsuleHeight = capsule.height
					that.titleHeight = capsule.height + 10 + capsule.top
				})
			}
			if (options.source == 'sharetime') {
				// 从分享而来

				Api.LoginApi.login(that, (res) => {
					uni.setStorageSync('firstLogin', 0)
					that.fromMessagePage = options.fromMessagePage == 'true' ? true : false
					that.initDetail(options)
					let capsule = uni.getMenuButtonBoundingClientRect()
					that.capsuleTop = capsule.top
					console.log(capsule)
					that.capsuleHeight = capsule.height
					that.titleHeight = capsule.height + 10 + capsule.top

				})

				// console.log('从分享到的朋友圈进来')
				// uni.setStorageSync('firstLogin', 0)
				// that.fromMessagePage = options.fromMessagePage == 'true' ? true : false
				// that.initDetail(options)
				// let capsule = uni.getMenuButtonBoundingClientRect()
				// that.capsuleTop = capsule.top
				// console.log(capsule)
				// that.capsuleHeight = capsule.height
				// that.titleHeight = capsule.height + 10 + capsule.top
			} else {
				this.fromMessagePage = options.fromMessagePage == 'true' ? true : false
				this.initDetail(options)
				let capsule = uni.getMenuButtonBoundingClientRect()
				this.capsuleTop = capsule.top
				console.log(capsule)
				this.capsuleHeight = capsule.height
				this.titleHeight = capsule.height + 10 + capsule.top

			}

		},
		// 页面周期函数--监听页面初次渲染完成
		onReady() {},
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() {},
		// 页面周期函数--监听页面隐藏
		onHide() {},
		// 页面周期函数--监听页面卸载
		onUnload() {},
		onPageScroll(e) {
			if (e.scrollTop >= 10) {
				this.stickyscroll = true
			} else {
				this.stickyscroll = false
			}
		},
	}
</script>
<style scoped lang="scss">
	@import url(../../static/css/base.css);


	.swiper-box {
		width: 750rpx;
		height: 576rpx;
	}

	.container {
		background-color: #F5F9FA;
		width: 100%;
		min-height: 100vh;
		// position: absolute;
		top: 0;
		overflow: scroll;
	}

	.black-view {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.05);
		z-index: 1;
	}

	.title_view {
		position: fixed;
		right: 0;
		left: 0;

		.title {

			font-size: 32rpx;
			font-weight: 500;
			text-align: center;
			color: #FFFFFF;
			height: 40rpx;
			padding: 0 30rpx 10px 30rpx;
			box-sizing: border-box;
			width: 100%;
			top: 0;
			left: 0;

			.left_arrow_box {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 22rpx;
					height: 38rpx;
					margin: 21rpx 0;
				}
			}
		}
	}




	.post-detail {
		border-top-left-radius: 44rpx;
		border-top-right-radius: 44rpx;
		padding-top: 44rpx;
		background: #FFFFFF;
		// padding-bottom: 1rpx;
		position: relative;
		top: -44rpx;
		width: 100%;
		// height: 546px;
		opacity: 1;

		background: #FFFFFF;

		.detail-title {
			font-size: 40rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.85);
		}

		.detail-collect-wrap {
			// border-radius: 200rpx;
			// box-sizing: border-box;
			// border: 1px solid #000000;
			// padding: 10rpx 20rpx;

			border-radius: 200rpx;
			box-sizing: border-box;
			border: 1px solid #000000;
			height: 48rpx;
			width: 128rpx;
			justify-content: center;

			.detail-collect-title {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				margin-right: 16rpx;
			}

			.detail-collect {
				width: 24rpx;
				height: 22.6rpx;
			}
		}

		.post-detail-money-wrap {
			margin-top: 32rpx;

			.post-detail-money-label {
				margin-left: 32rpx;
				border-radius: 4rpx;
				/* padding: 4rpx 4rpx 6rpx 4rpx; */
				box-sizing: border-box;
				border: 1px solid #F87147;
				font-size: 24rpx;
				font-weight: normal;
				color: #F87147;
				width: 32rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.post-detail-money {
				margin-left: 16rpx;
				font-weight: bold;
				color: #EF2D2D;

				/* 20000 */
				font-weight: 700;
				font-size: 36rpx;
			}

			.post-detail-money-unit {
				color: #EF2D2D;
				font-weight: 400;
				font-size: 24rpx;
			}

			.post-detail-view {
				flex: 1;
				text-align: right;
				margin-right: 32rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #999999;
			}
		}

		.post-detail-label-wrap {
			// margin-top: 32rpx;
			margin-top: 52rpx;
			flex-wrap: wrap;

			.post-detail-label {
				margin-left: 32rpx;
				border-radius: 12rpx;
				padding: 8rpx 16rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #666;
				border-radius: 4rpx;
				opacity: 1;
				margin-bottom: 15rpx;
				background: #F5F6F6;
			}
		}

		.post-detail-location-wrap {
			display: flex;
			justify-content: flex-start;
			font-size: 28rpx;
			font-weight: 600;
			color: #000;
			align-items: center;
			// margin: 30rpx 50rpx;
			margin: 46rpx 50rpx;

			.post-detail-location-icon {
				width: 32rpx;
				height: 33.5rpx;
				display: block;
			}

			.post-detail-location {
				margin-left: 19rpx;

			}
		}

		.post-detail-tips {
			font-size: 24rpx;
			color: #999;
			font-weight: normal;
			background-color: #f5f5f5;
			margin: 15rpx 0rpx;
			padding: 20rpx 50rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;

			.post-detail-tips-title {
				font-weight: 700;
				color: #333;
				font-style: italic;
			}

			.post-detail-tips-link {
				font-weight: 500;
				color: #F87147;
				padding-left: 10rpx;
				float: right;
				padding-right: 30rpx;
			}

			.comment_right {
				width: 11rpx;
				height: 17rpx;
				margin-left: 30rpx;
			}
		}

		.map-container {
			// height: 400rpx;
			// display: flex;
			// justify-content: center;
			// margin-top: 30rpx;

			position: relative;
			text-align: center;
			margin: auto;
			/* margin-left: 30rpx; */
			/* margin-right: 30rpx; */
			width: 300px;
		}

		.post-detail-comment-wrap {
			margin: 30rpx;
			padding: 28rpx 20rpx;
			border-radius: 16rpx;

			background: #F5F6F6;

			.post-detail-comment-nick {
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.75);
			}

			.post-detail-comment-content {
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}

		.footer {
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			right: 0rpx;
			height: 144rpx;
			opacity: 1;

			background: #FFFFFF;

			box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.avatar {
				margin-left: 32rpx;
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;

				box-sizing: border-box;
				// border: 1px solid #F8D247;
			}

			.nickname-wrap {
				margin-left: 20rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;

				.nickname {}

				.nickname-label {
					border-radius: 200rpx;
					box-sizing: border-box;
					border: 2rpx solid #F87147;
					height: 32rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 128rpx;
					padding: 0 10rpx;

					.label-icon {
						display: block;
						width: 16.7rpx;
						height: 16rpx;
					}

					.label-title {
						font-size: 20rpx;
						font-weight: normal;
						color: #F87147;
						margin-left: 2.5rpx;
					}
				}
			}

			.comment {
				// padding: 18rpx 32rpx;
				// margin-right: 16rpx;
				// border-radius: 8rpx;
				// opacity: 1;

				// background: #F8D247;
				// font-size: 28rpx;
				// font-weight: 500;
				// color: rgba(0, 0, 0, 0.85);

				margin-right: 16rpx;
				width: 176rpx;
				height: 64rpx;
				border-radius: 8rpx;
				opacity: 1;
				background: #F8D247;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				font-weight: 500;
				align-items: center;
				color: rgba(0, 0, 0, 0.85);
			}

			.contact {
				// padding: 18rpx 46rpx;
				// margin-right: 16rpx;
				// border-radius: 8rpx;
				// opacity: 1;

				// background: #F87147;
				// font-size: 28rpx;
				// font-weight: 500;
				// color: rgba(0, 0, 0, 0.85);

				margin-right: 16rpx;
				border-radius: 8rpx;
				opacity: 1;
				width: 176rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 64rpx;
				background: #F87147;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
			}
		}
	}

	.bigpic {
		width: 50rpx;
		height: 50rpx;
		margin-top: 100rpx;
		margin-left: 60rpx;
	}
</style>